import * as THREE from 'three';

import TWEEN from 'three/examples/jsm/libs/tween.module.js';
import {TrackballControls} from 'three/examples/jsm/controls/TrackballControls.js';
import {CSS3DRenderer, CSS3DObject} from 'three/examples/jsm/renderers/CSS3DRenderer.js';
import {Clazz} from "../entity/Clazz";

class TextBox extends Clazz{
    constructor(scene,camera) {
        super();

        let renderer;
        let controls;

        const objects = [];

        init();

        this._update=function(){
            animate();
        }

        function init() {

            // table



                const element = document.createElement('div');
                element.className = 'element';
                element.style.backgroundColor = 'rgba(0,127,127,' + (Math.random() * 0.5 + 0.25) + ')';

                const number = document.createElement('div');
                number.className = 'number';
                number.textContent = "1";
                element.appendChild(number);

                const symbol = document.createElement('div');
                symbol.className = 'symbol';
                symbol.textContent = "H";
                element.appendChild(symbol);

                const details = document.createElement('div');
                details.className = 'details';
                details.innerHTML = 'Hydrogen is H<br>1.00794';
                element.appendChild(details);
                document.body.appendChild(element)
                const objectCSS = new CSS3DObject(element);
                objectCSS.position.x = 0;
                objectCSS.position.y = 0;
                objectCSS.position.z = 0;
                scene.add(objectCSS);

                objects.push(objectCSS);

                /*//

                const object = new THREE.Object3D();
                object.position.x = 0
                object.position.y = 0;
                object.position.z = 0;

                targets.table.push(object);*/


            // sphere
            renderer = new CSS3DRenderer();
            renderer.setSize(window.innerWidth, window.innerHeight);
            renderer.domElement.style.position = 'absolute';
            renderer.domElement.style.top = 0;
            renderer.domElement.style.left = 0;
            document.body.appendChild(renderer.domElement);

            //

            controls = new TrackballControls(camera, renderer.domElement);
            controls.minDistance = 500;
            controls.maxDistance = 6000;
            controls.addEventListener('change', render);

            //transform(targets.table, 2000);

            //

            window.addEventListener('resize', onWindowResize);

        }

        function transform(targets, duration) {

            TWEEN.removeAll();

            for (let i = 0; i < objects.length; i++) {

                const object = objects[i];
                const target = targets[i];

                new TWEEN.Tween(object.position)
                    .to({
                        x: target.position.x,
                        y: target.position.y,
                        z: target.position.z
                    }, Math.random() * duration + duration)
                    .easing(TWEEN.Easing.Exponential.InOut)
                    .start();

                new TWEEN.Tween(object.rotation)
                    .to({
                        x: target.rotation.x,
                        y: target.rotation.y,
                        z: target.rotation.z
                    }, Math.random() * duration + duration)
                    .easing(TWEEN.Easing.Exponential.InOut)
                    .start();

            }

            new TWEEN.Tween(this)
                .to({}, duration * 2)
                .onUpdate(render)
                .start();

        }

        function onWindowResize() {

            camera.aspect = window.innerWidth / window.innerHeight;
            camera.updateProjectionMatrix();

            renderer.setSize(window.innerWidth, window.innerHeight);

            render();

        }

        function animate() {

            TWEEN.update();

            controls.update();
            render();

        }

        function render() {

            renderer.render(scene, camera);

        }
    }
    update() {
        super.update();
        this._update();
    }

}

export {TextBox}